<template>
  <div class="myContailer">
    <el-row class="myTitleBorderBottom">
      <el-col :span="12" class="myLineHeight_40px">{{title}}</el-col>
      <el-col :span="12" class="myTextAlignRight">
        
      </el-col>
    </el-row>
    <el-row class="myMarginTop_10px">
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="list"
        :border = true
        :stripe = true
        :row-class-name="tableRowClassName"
        style="width: 100%"
        class="myhome"
        @selection-change="handleSelectionChange">
        <el-table-column label="选择" width="55">
          <template scope="scope">
            <el-radio class="radio" v-model="radio" :label="scope.row.module_id"></el-radio>
          </template>
        </el-table-column>
        <!-- <el-table-column
          type="selection"
          width="55">
        </el-table-column> -->
        <!-- <el-table-column
          label="序号"
          width="100"
          type="index"
          >
        </el-table-column> -->
        <el-table-column
          prop="module_id"
          label="模块ID"
          >
        </el-table-column>
        <el-table-column
          prop="module_name"
          label="模块名"
          >
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="myMarginTop_10px">
      <el-button type="primary" class="myBgGreen" @click="onBack">返 回</el-button>
      <el-button type="primary" class="myBgGreen" @click="onSeva">保 存</el-button>
    </el-row>
  </div>
</template>     

<style>
  .myhome .el-radio__label{
    display: none;
  }
</style>
<style scoped>
  .myContailer{
    background: #fff;
    padding: 10px;
  }
  .myTitleBorderBottom{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #dbdbdb;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top:2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myMarginTop_10px{
    margin-top: 10px;
  }
</style>

<script>
  import { getHomePowerList , setHomePower } from '@/api/role';
  export default {
    data(){
      return{
        title:"首页权限管理",
        id:"",
        list:[],
        loading:false,
        multipleSelection:[],
        idArr:[],
        radio:''
      }
    },
    components: {
        
    },
    mounted(){
      document.title = this.title;
      this.id = this.$route.query.id;
      
      this.onGetHomePowerList();
    },
    methods:{
      onGetHomePowerList(){
        let vm=this;
        vm.loading=true;
        getHomePowerList(vm.id).then(response => {
          let res=response.data;
          vm.list=res;

          setTimeout(function(){
            let checkList=[];
            for(let i=0; i<res.length; i++){
              if(res[i].checked){
                //checkList.push(res[i]);

                vm.radio=res[i].module_id;
              }
            }
            // console.log("------",checkList)
            // checkList.forEach(row => {
            //   console.log("++++",row)
            //   vm.$refs.multipleTable.toggleRowSelection(row);
            // });
          },150)
          

          vm.loading=false;
          //console.log(res)
        }).catch(error => {
          vm.loading=false;
          console.log(error)
        })
      },
      handleSelectionChange(val) {
        // this.multipleSelection = val;
        // this.idArr=[];
        // if(val.length!=0){
        //   for(var i = 0;i<val.length;i++){
        //     this.idArr.push(val[i].module_id)
        //   }
        // }else{
        //   this.idArr = [];
        // }
        //console.log(this.multipleSelection,this.idArr);
      },
      tableRowClassName(row, index) {
        row.index = index
      },
      onSeva(){
        let vm=this;
        vm.idArr=[];
        vm.idArr.push(vm.radio);
        setHomePower(vm.id,vm.idArr).then(response => {
          let res=response.data;
          vm.$message.success("执行成功！");
          vm.onBack();
          // console.log(res)
        }).catch(error => {
          vm.$message.error("执行失败！");
          console.log(error)
        })
      },
      onBack(){
        let vm=this;
        window.localStorage.setItem('pageNum',vm.$route.query.pageNum||1);
        vm.$router.go(-1);
      }
    }
  }
</script>



